<template>
  <layer
    :layer="layer"
    @confirm="submit"
    ref="layerDom"
    @close="cancel"
    class="layer"
  >
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rulesObj"
      :inline="true"
      :label-width="80"
    >
      <el-form-item label="上级部门" style="width: 100%">
        <el-cascader
          ref="cascader"
          :options="selectData"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="handleChange"
          v-model="form.parentId"
          style="width: 100%"
        ></el-cascader>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              v-model="form.deptName"
              placeholder="请输入部门名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" style="width: 100%" prop="orderNum">
            <el-input-number
              :min="0"
              :max="99"
              v-model="form.orderNum"
              controls-position="right"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人">
            <el-input placeholder="请输入负责人" v-model="form.leader" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" style="width: 100%">
            <el-input
              v-model="form.phone"
              placeholder="请输入联系电话"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态" style="width: 100%" prop="status">
            <el-select
              placeholder="请选择部门状态"
              v-model="form.status"
              style="width: 100%"
            >
              <el-option
                v-for="(value, key, index) in statusObj"
                :key="index"
                :label="value"
                :value="key"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </layer>
</template>
<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import layer from "_c/layer/index.vue";
import { addDept, editDept } from "@/api/dept.js";
import { ElMessage } from "element-plus";
export default defineComponent({
  components: { layer },
  props: {
    //用于控制对话框
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: "",
          showButton: true,
        };
      },
    },
    //多级选择框数据
    selectData: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    //部门状态
    statusObj: {
      type: Object,
      required: true,
    },
  },
  setup(props, ctx) {
    //用于控制级联下拉
    const cascader = ref(null);
    //表单数据
    const form = ref({
      id: "" || undefined,
      parentId: "",
      deptName: "",
      orderNum: 0,
      leader: "" || undefined,
      phone: "" || undefined,
      email: "" || undefined,
      status: "" || undefined,
    });
    //表单校验规则
    const rulesObj = {
      deptName: [
        { required: true, message: "请输入部门名称", trigger: "blur" },
      ],
      orderNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      status: [{ required: true, message: "请选择状态", trigger: "blur" }],
    };
    //级联选择回调方法
    const handleChange = (arr) => {
      //不能选自己（编辑时）
      if (props.layer.row && props.layer.row.id === arr[arr.length - 1]) {
        ElMessage.warning("不能选择上级部门为自己！");
        return;
      }
      if (arr) {
        form.value.parentId = arr[arr.length - 1];
      } else {
        form.value.parentId = 0;
      }
      cascader.value.togglePopperVisible();
    };
    //表单引用
    const ruleForm = ref(null);
    //关闭对话框
    const cancel = () => {
      ruleForm.value.resetFields();
    };
    //挂载
    const init = () => {
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row));
      }
    };
    init();
    //更新方法
    const updateForm = async (obj) => {
      const { success } = await editDept(obj);
      if (success) {
        props.layer.show = false;
        cancel();
        ctx.emit("getTableData");
        ElMessage.success("操作成功！");
      }
    };
    //新增方法
    const addForm = async (obj) => {
      const { success } = await addDept(obj);
      if (success) {
        props.layer.show = false;
        cancel();
        ctx.emit("getTableData");
        ElMessage.success("操作成功！");
      }
    };
    const submit = () => {
      if (ruleForm.value) {
        //规则校验
        ruleForm.value.validate((valid) => {
          if (valid) {
            let params = form.value;
            if (props.layer.row && props.layer.row.flag) {
              updateForm(params);
            } else {
              addForm(params);
            }
          } else {
            return false;
          }
        });
      }
    };
    return {
      cascader,
      form,
      rulesObj,
      ruleForm,
      cancel,
      submit,
      handleChange
    };
  },
});
</script>
<style lang="scss" scoped>
.el-row {
  display: flex;
  justify-content: space-between;
}
</style>
